<template>
	<div class="zco-card-collection-response-container">
		<p>{{ getMessage }}</p>
		<template v-if="status === 'done' && cmdType === 'bankcard-collection'">
			<p>银行卡正面：</p>
			<img :src="frontBankCard" width="78" height="98" @click="previewFronBankCard" />
		</template>
		<template v-if="status === 'done' && cmdType === 'idcard-collection'">
			<p>身份证正面：</p>
			<img :src="frontIdCard" width="78" height="98" @click="previewFrontIdCard" />
			<p>身份证反面：</p>
			<img :src="sideIdCard" width="78" height="98" @click="previewSideIdCard" />
		</template>
		<p v-if="status !== 'done'">原因：访客拒绝</p>
	</div>
</template>
<script>
import zcoIMEvent from '@/store/event';
export default {
	name: 'APP',
	props: {
		toUserRole: {
			type: String,
			default: () => ''
		},
		toUserName: {
			type: String,
			default: () => ''
		},
		status: {
			type: String,
			default: () => ''
		},
		frontBankCard: {
			type: String,
			default: () => ''
		},
		frontIdCard: {
			type: String,
			default: () => ''
		},
		sideIdCard: {
			type: String,
			default: () => ''
		},
		cmdType: {
			type: String,
			default: () => ''
		}
	},
	computed: {
		getMessage() {
			return `致 <${this.toUserRole === 'agent' ? '坐席' : '访客'}${this.toUserName}>，${this.status === 'done' ? '提交成功' : '提交失败'}`;
		}
	},
	data() {
		return {};
	},
	methods: {
		previewFronBankCard() {
			zcoIMEvent.emitPreview({ type: 'png', url: this.frontBankCard });
		},
		previewFrontIdCard() {
			zcoIMEvent.emitPreview({ type: 'png', url: this.frontIdCard });
		},
		previewSideIdCard() {
			zcoIMEvent.emitPreview({ type: 'png', url: this.sideIdCard });
		}
	},
	created() {},
	mounted() {}
};
</script>
<style scoped>
.zco-card-collection-response-container p {
	margin: 0;
}
</style>
